<template>
  <v-card color="text-center">
    <v-card-text class="d-flex flex-column justify-center align-center">
      <!-- User Avatar -->
      <v-avatar size="60" color="white" class="v-avatar white">
        <v-img src="../../assets/images/avatars/1.png"></v-img>
      </v-avatar>
      <!-- Title, Subtitle & Action Button -->
      <div class="d-flex justify-space-between flex-wrap pt-6">
          <v-card-title class="pt-0 px-0" style="font-weight:bold;font-size:25px">
            游客
          </v-card-title>
      </div>
      <div>
        <span>
          尚未登录
        </span>
      </div>
      <div class="pt-2"></div>
      <v-btn @click="goToLogin" color="primary" large>
        前往登录
      </v-btn>
    </v-card-text>
  </v-card>
</template>

<script>
import { mdiHelpCircleOutline } from "@mdi/js";
export default {
  setup() {
    return {
      icons: {
        mdiHelpCircleOutline,
      },
    };
  },
  methods: {
    goToLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.greeting-card {
  position: relative;
  .greeting-card-bg {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .greeting-card-trophy {
    position: absolute;
    bottom: 10%;
    right: 8%;
  }
}
// rtl
.v-application {
  &.v-application--is-rtl {
    .greeting-card-bg {
      right: initial;
      left: 0;
      transform: rotateY(180deg);
    }
    .greeting-card-trophy {
      left: 8%;
      right: initial;
    }
  }
}
</style>
